<template>
  <body>
  <div class="shell">
    <div id="img-box">
      <img src="../assets/login/1.png" alt="">
    </div>
    <div class="form">
      <div id="form-body" v-if="isLogin">
        <div id="welcome-lines">
          <div id="w-line-1">HI!</div>
          <div id="w-line-2">Welcome</div>
        </div>
        <div id="input-area">
          <div class="f-inp">
            <input v-model="username" type="text" placeholder="Username">
          </div>
          <div class="f-inp">
            <input v-model="password" type="password" placeholder="Password">
          </div>
        </div>
        <div id="submit-button-cvr">
          <button id="submit-button" @click="login()">LOGIN</button>
        </div>
        <div id="forgot-pass">
          <a @click="toRegister()" style="cursor: pointer">register</a>
        </div>
      </div>
      <div id="form-body" v-if="!isLogin">
        <div id="welcome-lines">
          <div id="w-line-1">Register!</div>
          <div id="w-line-2">Please register</div>
        </div>
        <div id="input-area">
          <div class="f-inp">
            <input v-model="regUsername" type="text" placeholder="Username">
          </div>
          <div class="f-inp">
            <input v-model="email" type="text" placeholder="Email">
          </div>
          <div class="f-inp">
            <input v-model="regPassword" type="password" placeholder="Password">
          </div>
          <div class="f-inp">
            <input v-model="conRePassword" type="password" placeholder="Confirm Password">
          </div>
        </div>
        <div id="submit-button-cvr">
          <button id="submit-button" @click="register()">Register</button>
        </div>
        <div id="forgot-pass">
          <a @click="toRegister()" style="cursor: pointer">back</a>
        </div>
      </div>
    </div>

  </div>
  </body>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Login",
  data(){
    return{
      username: '',
      password: '',
      regUsername: '',
      email: '',
      regPassword: '',
      conRePassword:'',
      isLogin: true,
    }
  },
  methods:{
    login(){
      request.post("/user/login/", {username: this.username, password: this.password}).then(res=>{
        if(res.code === 200){
          sessionStorage.setItem("id", res.data.id)
          sessionStorage.setItem("username", res.data.username)
          sessionStorage.setItem("password", res.data.password)
          sessionStorage.setItem("email", res.data.email)
          this.$message({
            type:"success",
            message:"Success!"
          })
          this.$router.push('/page1')
        }else{
          this.$message({
            type:"error",
            message:"Server error"
          })
        }
      })
    },
    register(){
      if(this.regPassword !== this.conRePassword){
        this.$message({
          type:"error",
          message:"Confirm password doesn't match"
        })
      }else{
        request.post("/user/register/", {username: this.regUsername, password: this.regPassword, email: this.email}).then(res=>{
          if(res.code === 200){
            this.$message({
              type:"success",
              message:"Success!"
            })
          }else{
            this.$message({
              type:"error",
              message:"Server error"
            })
          }
        })
      }
    },
    toRegister(){
      this.username= ''
      this.password= ''
      this.regUsername= ''
      this.email= ''
      this.regPassword= ''
      this.conRePassword=''
      this.isLogin = !this.isLogin
    }
  }
}
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
  outline: none;
}

body {
  background: linear-gradient(45deg, #fbda61, #ff5acd);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.shell,
.form {
  position: relative;
}

.shell {
  display: flex;
  justify-content: center;
}

.form {
  width: 562px;
  height: 520px;
  background-color: #fff;
  box-shadow: 0px 15px 40px #b6354e;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#img-box {
  width: 330px;
  height: 520px;
}

#img-box img {
  height: 100%;
}

#form-body {
  width: 320px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#welcome-lines {
  width: 100%;
  text-align: center;
  line-height: 1;
}

#w-line-1 {
  color: #7f7f7f;
  font-size: 50px;
}

#w-line-2 {
  color: #9c9c9c;
  font-size: 30px;
  margin-top: 17px;
}

#input-area {
  width: 100%;
  margin-top: 40px;
}

.f-inp {
  padding: 13px 25px;
  border: 2px solid #6e6d6d;
  line-height: 1;
  border-radius: 20px;
  margin-bottom: 15px;
}

.f-inp input {
  width: 100%;
  font-size: 14px;
  padding: 0;
  margin: 0;
  border: 0;
}

.f-inp input::placeholder {
  color: #b9b9b9;
}

#submit-button-cvr {
  margin-top: 20px;
}

#submit-button {
  display: block;
  width: 100%;
  color: #fff;
  font-size: 14px;
  margin: 0;
  padding: 14px 40px;
  border: 0;
  background-color: #f5506e;
  border-radius: 25px;
  line-height: 1;
  cursor: pointer;
}

#forgot-pass {
  text-align: center;
  margin-top: 10px;
}

#forgot-pass a {
  color: #868686;
  font-size: 12px;
  text-decoration: none;
}
</style>